<template>
    <div>
        <h1>饼图</h1>
        <div class="case-desc">
            <p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p>
        </div>
        <el-collapse accordion>
            <el-collapse-item title="基础饼图" name="1">
                <template #title>
                    <h2>基础饼图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/pie/basic-pie">#</a>
                    </h2>
                </template>
                <Case1></Case1>
                <br>
                <Case2></Case2>
                <br>
                <Case3></Case3>
            </el-collapse-item>
            <el-collapse-item title="圆环图" name="2">
                <template #title>
                    <h2>圆环图<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/pie/doughnut">#</a>
                    </h2>
                </template>
                <Case4></Case4>
            </el-collapse-item>
            <el-collapse-item title="南丁格尔图（玫瑰图）" name="3">
                <template #title>
                    <h2>南丁格尔图（玫瑰图）<a
                            href="https://echarts.apache.org/handbook/zh/how-to/chart-types/pie/rose">#</a>
                    </h2>
                </template>
                <Case5></Case5>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
    import Case1 from './PieCase1.vue';
    import Case2 from './PieCase2.vue';
    import Case3 from './PieCase3.vue';
    import Case4 from './PieCase4.vue';
    import Case5 from './PieCase5.vue';
</script>

<style lang="scss" scoped>

</style>
